<template>
  <view class="page">
	  <!-- 自定义顶部导航栏 -->
	  <view class="head">
	  	<view class="head1">
	  		<text class="iconfont icon-fenxiang1"  @click="goBack"></text>
	  		<text class="nav-title">好友-1</text>
	  	</view>
	  </view>
    <view class="cu-chat" id="j_page">
      <!-- 聊天数据循环展示 -->
      <view class="cu-item 'self'" v-for="(item, index) in chatData" :key="index">
        <view class="main">
          <view class="content shadow bg-green">
            <text>{{item.content}}</text>
          </view>
        </view>
        <!-- 修复插值语法 -->
        <view class="cu-avatar radius" :style="'background-image:url(' + item.avatarUrl + ')'" />
        <view class="date">{{item.createTime}}</view>
      </view>
    </view>

    <!-- 输入框及发送按钮 -->
    <view class="cu-bar">
      <view class="action">
		   <text class="iconfont icon-yuyin" v-if="show" @click="isShow"></text>
		  <text class="iconfont icon-jianpan" v-else></text>
      
      </view>
      <input class="solid-bottom" v-model="content" placeholder="请输入消息..."/>
      <view class="action">
        <text class="iconfont icon-biaoqing" ></text>
      </view>
	   <button class="cu-btn bg-green shadow" v-if="content" @click="sendMsg">发送</button>
	  <text class="iconfont icon-tianjia" v-else></text>
     
    </view>
  </view>
</template>



<script>
	
	export default {
	  data() {
	    return {
			show:'',//语音
	      content: '', // 输入框内容
	      chatData: [
	        { // 静态聊天数据
	          content: "你好！",
	          createTime: "2025-01-14 12:00",
	          avatarUrl: "https://ts3.cn.mm.bing.net/th?id=OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
	        },
	        {
	          content: "你好，最近怎么样？",
	          createTime: "2025-01-14 12:05",
	          avatarUrl: "https://ts3.cn.mm.bing.net/th?id=OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
	        },
	      ],
	    };
	  },
	
	  methods: {
		  goBack() {
		    uni.navigateBack(-1)
		  },
		  isShow(){
			  this.show=!this.show
		  },
		// 日期格式化函数
		    formatDate(date) {
		      const year = date.getFullYear();
		      const month = String(date.getMonth() + 1).padStart(2, '0');
		      const day = String(date.getDate()).padStart(2, '0');
		      const hours = String(date.getHours()).padStart(2, '0');
		      const minutes = String(date.getMinutes()).padStart(2, '0');
		      
		      return `${year}-${month}-${day} ${hours}:${minutes}`;
		    },
	    // 发送消息
	    sendMsg() {
	      if (this.content) {
	        const newMessage = {
	          content: this.content,
	        createTime: this.formatDate(new Date()), // 格式化当前时间
	          avatarUrl: "https://ts3.cn.mm.bing.net/th?id=OIP-C.3r1vguZyWFUJ80A2Nf2k3AHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
	        };
	
	        // 更新聊天数据
	        this.chatData.push(newMessage);
	        this.content = ''; // 清空输入框
	      }
	    },
	  },
	};

</script>

<style scoped lang="scss">
@import 'friendsDetail.scss';
</style>
